<template>
  <div class="app-container">
    <div id="data">
      <el-row>
        <el-col :span="6">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="13">
          <el-select v-model="select" placeholder="链路选择">
            <el-option label="1" value="1"></el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <el-button @click="download">导出</el-button>
          <el-button @click="toGraphical" type="primary" plain
            >查看图形</el-button
          >
        </el-col>
      </el-row>

      <el-row style="margin-top: 35px">
        <el-col :span="4">
          <strong>子系统名称</strong>
        </el-col>
        <el-col :span="3">
          <strong>线上版本</strong>
        </el-col>
        <el-col :span="3">
          <strong>当前测试版本</strong>
        </el-col>
        <el-col :span="3">
          <strong>计划截至时间</strong>
        </el-col>
        <el-col :span="3">
          <strong>历史未解决Bug数量</strong>
        </el-col>
        <el-col :span="2">
          <strong>当日新增</strong>
        </el-col>
        <el-col :span="2">
          <strong>测试负责人</strong>
        </el-col>
        <el-col :span="2">
          <strong>状态</strong>
        </el-col>
        <el-col :span="2">
          <strong>备注</strong>
        </el-col>
      </el-row>

      <el-row
        v-for="(v, i) of subsystem_version_extension"
        :key="v.subsystem_id"
        type="flex"
        align="middle"
        style="margin-top: 35px"
      >
        <el-col :span="4">
          <el-checkbox
            v-model="checkeds[i]"
            style="margin-right: 15px"
          ></el-checkbox>
          <a
            style="color: blue"
            :href="'/#/iteration/index?id=' + v.subsystem_id"
            >{{ v.subsystem_name }}</a
          >
        </el-col>
        <el-col :span="3">
          <span>{{ v.online_version }}</span>
        </el-col>
        <el-col :span="3">
          <strong>{{ v.current_test_version }}</strong>
        </el-col>
        <el-col :span="3">
          <strong>{{
            v.plan_deadline.substring(1, v.plan_deadline.length - 1)
          }}</strong>
        </el-col>
        <el-col :span="3">
          <strong>{{ v.history_unsolved_bug_total }}</strong>
        </el-col>
        <el-col :span="2">
          <strong>{{ v.this_day_bug_add }}</strong>
        </el-col>
        <el-col :span="2">
          <strong>{{ v.test_leader }}</strong>
        </el-col>
        <el-col :span="2">
          <strong>{{ v.test_status }}</strong>
        </el-col>
        <el-col :span="2">
          <el-input
            size="mini"
            v-model="v.remark"
            placeholder="请输入"
          ></el-input>
        </el-col>
      </el-row>
      <hr />
    </div>
  </div>
</template>

<script>
import * as projectData from "@/api/projectData";

export default {
  data() {
    return {
      radio: 3,
      value1: "",
      input: "",
      radio2: "全部",
      select: null,
      checkeds: [],
      subsystem_version_extension: [
        {
          subsystem_id: 504,
          subsystem_name: "PPP-RTK集成系统(PAKA_3prtk)",
          online_version: "PAKA_3prtk V1.2 第一轮测试",
          current_test_version: "PAKA_3prtk V1.2 第一轮测试",
          plan_deadline: '"2022-09-09"',
          history_unsolved_bug_total: 0,
          this_day_bug_add: 0,
          test_leader: "",
          test_status: "done",
          remark: "PAKA_3prtk V1.2 第一轮测试",
        },
        {
          subsystem_id: 294,
          subsystem_name: "基站位移监测系统(PD_PPK)",
          online_version: "PD_PPK1.0 第二轮执行",
          current_test_version: "PD_PPK1.0 第二轮执行",
          plan_deadline: '"2022-05-08"',
          history_unsolved_bug_total: 0,
          this_day_bug_add: 0,
          test_leader: "",
          test_status: "done",
          remark: "",
        },
        {
          subsystem_id: 51,
          subsystem_name: "基站数据分发系统(SiteDist)",
          online_version: "sitedist 1.0.0 第一轮执行",
          current_test_version: "sitedist 1.0.0 第一轮执行",
          plan_deadline: '"2022-04-26"',
          history_unsolved_bug_total: 0,
          this_day_bug_add: 0,
          test_leader: "",
          test_status: "done",
          remark: "",
        },
        {
          subsystem_id: 39,
          subsystem_name: "精准网可视化大屏(PPN_vis)",
          online_version: "平台驾驶舱和精准大屏回归测试",
          current_test_version: "平台驾驶舱和精准大屏回归测试",
          plan_deadline: '"2021-12-24"',
          history_unsolved_bug_total: 0,
          this_day_bug_add: 0,
          test_leader: "",
          test_status: "done",
          remark: "",
        },
      ],
    };
  },
  methods: {
    download() {
      let params = [];
      for (let v in this.checkeds) {
        if (this.checkeds[v]) {
          params.push(this.subsystem_version_extension[v].subsystem_id);
        }
      }
      projectData
        .downloadSub({
          subsystem_ids: params,
        })
        .then((res) => {
          let blob = res;
          let reader = new FileReader();
          reader.readAsDataURL(blob);
          reader.onload = (e) => {
            let a = document.createElement("a");
            a.download = "subsys_file.csv";
            a.href = e.target.result;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
          };
        });
    },
    toGraphical() {
      let count = 0,
        index = -1;
      for (let i in this.checkeds) {
        if (this.checkeds[i]) {
          count++;
          index = i;
        }
      }
      if (count == 1) {
        this.$router.push({
          path: "/graph/index",
          query: { id: this.subsystem_version_extension[index].subsystem_id },
        });
        return;
      }
      this.$notify.error({
        title: "错误",
        message: "必须勾选有且仅有一个选项",
      });
    },
  },
  created() {
    let id = window.location.href.split("id=")[1];
    projectData.subsystemIterationExtension(id).then((res) => {
      this.subsystem_version_extension = res.data.subsystem_version_extension;
    });
  },
};
</script>

<style scoped>
#data {
  margin: 50px 20px;
}
</style>
